<template>
  <view class="container">
    <!-- 生成内容 -->
    <view class="text-wrapper">
      <view class="text-area">
        这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字这里是一堆文字
      </view>
      <view class="num">555字数</view>
    </view>
    <view class="tip">以上内容生成,不代表本小程序观点</view>
		<!-- 提交按钮 -->
    <button class="copy-btn" @click="submitScript">全文复制</button>
    <button class="re-btn" @click="submitScript">重新生成</button>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 脚本类型
const scriptTypes = ["短视频", "广告文案", "影视剧本", "对话场景"];
const scriptType = ref(0); // 默认选中“短视频”
const keywords = ref(""); // 用户输入的关键词或大纲
const wordCount = ref(300); // 默认字数为 300
const generatedScript = ref(""); // 生成的脚本内容

const show = ref(false);
const items = ref([
  {
    text: "正式",
    value: "0",
  },
  {
    text: "幽默",
    value: "1",
  },
  {
    text: "学术",
    value: "2",
  },
	{
    text: "通俗",
    value: "3",
  },
	{
		text:"自定义",
		value:"4"
	}
]);
const itemsZ= ref([
	{
    text: "简体中文",
    value: "0",
  },
	{
    text: "繁体中文",
    value: "1",
  },
  {
    text: "英文",
    value: "2",
  },
  {
    text: "日语",
    value: "3",
  }
])
const value = ref("")
const popupRef = ref(null)

const onchange = (e) => {
  const value = e.detail.value;
};

const openAiScript = () => {
	console.log("popupRef",popupRef.value);
	popupRef.value.open('bottom');
}

const closeAiScript = () => {
	popupRef.value.close();
}

// 切换脚本类型
const onScriptTypeChange = (event) => {
  scriptType.value = event.detail.value;
};
</script>

<style lang="scss" scoped>
@font-face {
	font-family: CustomFont;
	src: url('../../static/iconfont.ttf');
}
.container {
  padding: 20px;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: #fafcff;
}
.text-wrapper {
  height: 70vh;
  background:white;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
    7px 7px 20px 0px rgba(0, 0, 0, .1),
    4px 4px 5px 0px rgba(0, 0, 0, .1);
  padding: 30rpx 20rpx;
  .text-area {
    height: calc(100% - 60rpx);
    border-bottom: 1rpx solid #F6F7FB;
  }
  .num {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-top: 20rpx;
    color: #BFC6CA;
    font-weight: bold;
  }
}
.tip {
  color: #BBBDC1;
  font-size: 20rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.copy-btn {
  background-color: #3386F1;
  color: white;
  border-radius: 15rpx;
  width: 100%;
  margin-bottom: 20rpx;
}
.re-btn {
  background-color: white;
  border:1px solid #3386F1;
  color: #3386F1;
  border-radius: 15rpx;
  width: 100%;
  margin-bottom: 20rpx;
}
</style>
